<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>

    <!--   采用挂载的静态资源路径 -->
    <link rel="stylesheet" href="/css/style.css">

    <style>
        .title {
            text-align: center;
            background-color: lightgreen;
            height: 50px;
            line-height: 50px;
            font-size: 24px;
        }

        .content {
            background-color: lightblue;
        }

        .content table {
            width: 100%;
            text-align: center;
            border-right: 1px solid orange;
            border-bottom: 1px solid orange;
        }

        .content td,
        th {
            border-left: 1px solid orange;
            border-top: 1px solid orange;
            height: 40px;
            line-height: 40px;
        }
    </style>


</head>

<body>
    <div class="title">图书管理系统<a href="/addbook.html">添加图书</a></div>
    <div class="content">
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>作者</th>
                    <th>分类</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id='tbody'>
                <!-- {{each list}}
                <tr>
                    <td>{{$value.id}}</td>
                    <td>{{$value.name}}</td>
                    <td>{{$value.author}}</td>
                    <td>{{$value.category}}</td>
                    <td>{{$value.description}}</td>
                    <td><a href="/toEditBook?id={{$value.id}}">修改</a>|<a href="/deleteBook?id={{$value.id}}">删除</a></td>
                </tr>
                {{/each}} -->
                <!-- <tr>
                    <td>1</td>
                    <td>西游记</td>
                    <td>吴承恩</td>
                    <td>文学</td>
                    <td>佛教与道教的斗争</td>
                    <td><a href="/editbook.html">修改</a>|<a href="#">删除</a></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>西游记</td>
                    <td>吴承恩</td>
                    <td>文学</td>
                    <td>佛教与道教的斗争</td>
                    <td><a href="#">修改</a>|<a href="#">删除</a></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>西游记</td>
                    <td>吴承恩</td>
                    <td>文学</td>
                    <td>佛教与道教的斗争</td>
                    <td><a href="#">修改</a>|<a href="#">删除</a></td>
                </tr> -->
            </tbody>
        </table>
    </div>



      <!-- /editbook.html?  这里是从服务器静态资源上去取这个页面 -->
    <script type="html/text" id='tmp'>
     {{each  data  item  index }}
     <tr>
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.author}}</td>
        <td>{{item.category}}</td>
        <td>{{item.desc}}</td>
        <td>
        <a href="/editbook.html?id={{item._id}}"  data-id="{{item._id}}"  class='editBtn'>修改</a>|
        <a href="#"  data-id="{{item._id}}" class='deleteBtn'>删除</a></td>
    </tr>
     

     {{/each}}

   
 


    </script>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    <script src="/js/template-web.js"></script>










    <script>
        // 图书列表展示

        //  url :'/index',
        // params: 无,
        // type:'get'

        //第一种 $.ajax()
        //第二种  axios()


        $(function () {
            //查询所有数据

            function  getBooksData() {
                axios.get('/index')
                .then(res => {
                    console.log(res.data)
                    let BooksList = template('tmp', res)
                    console.log(BooksList)
                    $('#tbody').html(BooksList)

                }).catch(err => {
                    console.log(err)
                })
            }

            getBooksData()
            


            //删除功能 
            // url:'/delete'
    
           $('#tbody').on('click','.deleteBtn',function(){
            
            let myid=$(this).attr('data-id')
            $.ajax({
                url:'/delete',
                data:{id:myid},
                success:function(res) {
                    console.log(res)
                    getBooksData()
            
                }
            })

           }) 
            

        })










    </script>
</body>

</html>